<style scoped>
::v-deep .el-tree-node.is-current > .el-tree-node__content {
    background: linear-gradient(to right, #E5EEFC, #FDFDFD); /* Add gradient effect */
    color:#1677FF;
    font-size: 14px;
}
.headStyle {
    margin-bottom: 10px;
}
.h-7 {
    height: 7%;
}
.h-93-10 {
    height: calc(93% - 10px);
}
.ml-15 {
    margin-left: 15px;
}
.w-2 {
    width: 2%;
}
.w-98 {
    width: 98%;
}
.w_15p {
    width: 15px;
    position: relative;
}
.w_100-15p {
    width: calc(100% - 15px);
}
.arrowBack {
    width: 20px;
    height: 100px;
    background-image: url('images/arrowBack.png');
    background-repeat: no-repeat;
    background-size: cover;

    position: absolute;
    left: 5px;
}
.arrowForward {
    width: 20px;
    height: 100px;
    background-image: url('images/arrowForward.png');
    background-repeat: no-repeat;
    background-size: cover;

    position: absolute;
    left: 5px;
}
.max {
    width: 20px;
    height: 20px;
    background-image: url('images/max.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.min {
    width: 20px;
    height: 20px;
    background-image: url('images/min.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.backIcon {
    width: 20px;
    height: 20px;
    background-image: url('images/backIcon.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.homeIcon {
    width: 20px;
    height: 20px;
    background-image: url('images/homeIcon.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.lineIcon {
    width: 1px;
    height: 25px;
    background-color: #e2e3e7;
}
.w-12 {
    width: 12%;
}
.optionIcon {
    font-size: 20px;
}
.option {
    font-size: 14px;
    color: #333333;
    border-bottom: 5px solid white;
}
.option:hover {
    font-size: 14px;
    color: #1677ff;
    border-bottom: 5px solid #1677ff;
}
.option:hover > img {
    transform: translateX(1300px);
    filter: drop-shadow(-1300px 0 #1677ff);
}

.isOption {
    font-size: 14px;
    color: #1677ff;
    border-bottom: 5px solid #1677ff;
}
.isOption > img {
    transform: translateX(1300px);
    filter: drop-shadow(-1300px 0 #1677ff);
}
.tableOption {
    width: 25%;
    height: 60%;
}
.tableOption:hover > img {
    transform: translateX(1300px);
    filter: drop-shadow(-1300px 0 #1677ff);
}

.w-min30 {
    min-width: 30%;
}
.w-min70 {
    min-width: 70%;
}
.bor-base-2px {
    border: 2px solid #ebeff6;
}

.h-27 {
    height: 26.5%;
}
.h-515 {
    height: 51.5%;
}
.w-87 {
    width: 87%;
}
.triangle {
    position: relative;
    width: 100%;
    height: 30%;
    border-radius: 5px;
    background-color: #f8f8fa;
}

.triangle::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 10px 20px 0 20px; /* 控制倒三角的大小 */
    border-color: #f8f8fa transparent transparent transparent; /* 控制倒三角的颜色 */
}
.mb-2 {
    margin-bottom: 2px;
}
.ml-2px {
    margin-left: 2px;
}
.mt-4 {
    margin-top: 4px !important;
}
.up {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('./images/up.png');
}
.down {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('./images/down.png');
}
.scrollStyle {
    border-radius: 3px;
    border: 1px solid #1677ff;
    background: linear-gradient(to right, #bdd4ff, white);
}
.h-86 {
    height: 86%;
}
.fs-8 {
    font-size: 10px;
}
.fontStyle {
    color: black;
}
.fontStyle:hover {
    background-color: white;
}
.bor-base-1px {
    border: 1px solid #d8dbdf;
}
.itemStyle {
    width: 14px;
    height: 14px;
}
.minw-100 {
    min-width: 100%;
}
.w-375 {
    width: 375px;
}

::v-deep .custom-row-height .el-table__body-wrapper tbody .el-table__row {
    height: 25px !important;
    font-size: 11px !important;
    color: black;
}

::v-deep .custom-row-height .el-table__body-wrapper tbody .el-table__row .cell {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 25px !important;
    font-size: 11px !important;
}

/* 控制表头的行高 */
::v-deep .custom-row-height .el-table__header-wrapper tr {
    height: 25px !important; /* 设置表头行高 */
    font-size: 11px !important;
    color: black;
}

::v-deep .custom-row-height .el-table__header-wrapper tr .cell {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 25px !important; /* 确保表头单元格高度与行高一致 */
    font-size: 11px !important;
}
.formItemOne{
    width: 80px;
}
.formItemTwo{
    width: 160px;
}
</style>
<template>
    <div class="wh-100">
        <!--    顶部页面-->
        <div class="w-100 h-7  headStyle d-flex-between-center" style="background-color: white">
            <div class="h-100 w-12 d-flex-between-center ml-12">
                <div class="homeIcon ml-8"></div>
                <div class="lineIcon"></div>
                <div class="backIcon"></div>
                <div class="lineIcon"></div>
                <div class="fs-16">数据视图</div>
            </div>
            <div class="w-15 pt-8 h-100 d-flex-between-center">
                <div @click="clickInquire" :class="isInquire==='1' ? 'isOption' : ''" class="h-100 d-flex-around-center flex-column overflow-hidden option cursor-pointer">
                    <img src="./images/inquire.png" />
                    <!--                    <i class="optionIcon el-icon-search"></i>-->
                    <div >查询</div>
                </div>
                <div @click="clickStatistics" :class="isInquire==='2' ? 'isOption' : ''" class=" h-100 d-flex-around-center flex-column overflow-hidden option cursor-pointer">
                    <img src="./images/statistics.png" />
                    <!--                    <i class="optionIcon el-icon-s-data"></i>-->
                    <div >统计</div>
                </div>
                <div @click="clickDerive" :class="isInquire==='3' ? 'isOption' : ''" class=" h-100 d-flex-around-center flex-column overflow-hidden option cursor-pointer">
                    <img src="./images/derive.png" />
                    <!--                    <i class="optionIcon el-icon-download"></i>-->
                    <div >导出</div>
                </div>
            </div>
            <div class="h-100 d-flex-align-center mr-8">
                <DatePicker class="mr-8" :value="dateValue" format="毕业年度：yyyy届" type="year" placeholder="请选择届别" style="width: 160px"></DatePicker>
                <user />
            </div>
        </div>
        <div class="w-100 h-93-10  d-flex">
            <!--        左侧页面-->
            <div class="w-15 h-100   overflow-auto-hidden" style="background-color: white">
                <div class="mt-12 w-100  h-5 d-flex-around-center">
                    <Input class="w-80 h-5 d-flex-align-center" v-model="searchKey" suffix="ios-search" @on-change="search" placeholder="输入学校名称搜索" clearable />
                </div>
                <div class="mt-8 ml-8 w-100 h-70 overflow-auto-hidden">
                    <el-tree  ref="tree"
                              class="treeStyle"
                              :data="dataTree"
                              :expand-on-click-node="false"
                              :props="treeProp"
                              node-key="id"
                              :default-expanded-keys="['0']"
                              :current-node-key="'0'"
                              :highlight-current="true"
                              @node-click="handleNodeClick"></el-tree>

<!--                    <Tree ref="tree" :data="dataTree" @on-select-change="selectTree" @on-check-change="changeSelect" :check-strictly="!strict"></Tree>-->
                </div>
            </div>
            <div class="w-85 h-100 ml-15 d-flex">
                <!--            中部页面-->
                <div
                    class="h-100 d-flex-between-center flex-column"
                    :class="{ 'w-70': isFold && !isAmplification, 'w-98': !isFold && !isAmplification, 'w-45': isFold && isAmplification }"
                    style="background-color: white"
                >
                    <div class="w-100 h-5 my-8 d-flex-between-center ">
                        <div class="h-100 w-min30 d-flex-align-center">
                            <div class="fs-14 fw-6 ml-16">全省数据</div>
                            <div class="w-min70 h-100 bor-base-2px ml-12 d-flex-align-center pl-20" style="border-radius: 5px">
                                范围：{{title }}
                            </div>
                        </div>
                        <div class="h-100 d-flex-align-center">
                            <el-select no-match-text="暂无数据"  no-data-text="暂无数据" v-model="selectValue" multiple collapse-tags placeholder="请选择" @visible-change="selectOp">
                                <el-option v-for="item in columnOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                            <Button class="mr-8" :icon="isFold ? `ios-arrow-forward` : `ios-arrow-back`" @click.native="clickShowRight" size="large" type="primary"></Button>
                        </div>
                    </div>
                    <div class="w-100 my-auto h-85  d-flex-around-center">
                        <div v-ref-height="hv" class="w-98 h-100 overflow-auto-hidden">
                            <el-table
                                empty-text="暂无数据"
                                v-loading="tableLoading"
                                ref="multipleTable"
                                :data="tableData"
                                tooltip-effect="dark"
                                style="width: 100%"
                                :height="hv.value"
                                border
                                :header-cell-style="{ background: $backColor, color: '#333333' }"
                                @selection-change="handleSelectionChange"
                            >
                                <el-table-column type="selection" width="55" ></el-table-column>
                                <el-table-column v-if="item.isShow"  v-for="item in tableColumn" :label="item.label" :prop="item.prop" :width="item.width">
                                    <template slot-scope="scope" >
                                        <!--专业-->
                                        <div v-if="item.prop === 'zy'"  class="wh-100 d-flex-around-center">
                                            {{zyList.find(item => item.zyCode == scope.row.zyCode) ? zyList.find(item => item.zyCode == scope.row.zyCode).title :""}}
                                        </div>
<!--                                        性别-->
                                        <div v-else-if="item.prop === 'sex'"  class="wh-100 d-flex-around-center">
                                            {{sexList.find(item => item.value == scope.row.sexCode) ? sexList.find(item => item.value == scope.row.sexCode).title :""}}
                                        </div>
<!--                                        民族-->
                                        <div v-else-if="item.prop === 'nation'"  class="wh-100 d-flex-around-center">
                                             {{mzList.find(item => item.value == scope.row.mzCode) ? mzList.find(item => item.value == scope.row.mzCode).title : ""}}
                                        </div>
                                        <!--政治面貌-->
                                        <div v-else-if="item.prop === 'zzmm'"  class="wh-100 d-flex-around-center">
                                            {{zzmmList.find(item => item.value == scope.row.zzmmCode) ? zzmmList.find(item => item.value == scope.row.zzmmCode).title :""}}
                                        </div>
                                        <!--学历-->
                                        <div v-else-if="item.prop === 'educationBackground'"  class="wh-100 d-flex-around-center">
                                            {{xlList.find(item => item.value == scope.row.xlCode) ? xlList.find(item => item.value == scope.row.xlCode).title :""}}
                                        </div>
                                        <!--培养方式-->
                                        <div v-else-if="item.prop === 'pyfs'"  class="wh-100 d-flex-around-center">
                                            {{pyfsList.find(item => item.value == scope.row.pyfsCode) ? pyfsList.find(item => item.value == scope.row.pyfsCode).title :""}}
                                        </div>
                                        <!--生源所在地-->
                                        <div v-else-if="item.prop === 'syszd'"  class="wh-100 d-flex-around-center">
                                            {{areaCodeList.find(item => item.value == scope.row.sydCode) ? areaCodeList.find(item => item.value == scope.row.sydCode).title :""}}
                                        </div>
                                        <!--城乡生源-->
                                        <div v-else-if="item.prop === 'cxsy'"  class="wh-100 d-flex-around-center">
                                            {{cxsyList.find(item => item.value == scope.row.cxsy) ? cxsyList.find(item => item.value == scope.row.cxsy).title :""}}
                                        </div>
                                        <!--学制-->
                                        <div v-else-if="item.prop === 'xz'"  class="wh-100 d-flex-around-center">
                                            {{xzList.find(item => item.value == scope.row.xz) ? xzList.find(item => item.value == scope.row.xz).title : ""}}
                                        </div>
                                        <!--师范生类别-->
                                        <div v-else-if="item.prop === 'sfslb'"  class="wh-100 d-flex-around-center">
                                            {{sfslbList.find(item => item.value == scope.row.sfslbCode) ? sfslbList.find(item => item.value == scope.row.sfslbCode).title :""}}
                                        </div>
                                        <!--困难生类别-->
                                        <div v-else-if="item.prop === 'knslb'"  class="wh-100 d-flex-around-center">
                                            {{knslbList.find(item => item.value == scope.row.knslbCode) ? knslbList.find(item => item.value == scope.row.knslbCode).title : ""}}
                                        </div>
                                        <!--毕业状况-->
                                        <div v-else-if="item.prop === 'byzk'"  class="wh-100 d-flex-around-center">
                                            {{oneTypeDicts.find(item => item.value == scope.row.onetype) ? oneTypeDicts.find(item => item.value == scope.row.onetype).title : "暂未登记或上报"}}
                                        </div>
                                        <!--毕业去向-->
                                        <div v-else-if="item.prop === 'byqx'"  class="wh-100 d-flex-around-center">
                                            {{typeList.find(item => item.value == scope.row.type) ? typeList.find(item => item.value == scope.row.type).title :""}}
                                        </div>
                                        <!--单位所在地-->
                                        <div v-else-if="item.prop === 'dwszd'"  class="wh-100 d-flex-around-center">
                                            {{areaCodeList.find(item => item.value == scope.row.dwszd) ? areaCodeList.find(item => item.value == scope.row.dwszd).title:""}}
                                        </div>
                                        <!--是否确认-->
                                        <div v-else-if="item.prop === 'isConfirm'"  class="wh-100 d-flex-around-center">
                                            {{scope.row.isConfirm === 1 ? "是":"否"}}
                                        </div>
                                        <!--状态-->
                                        <div v-else-if="item.prop === 'isActivate'"  class="wh-100 d-flex-around-center">
                                            <el-tag v-if="scope.row.isActivate == 0" type="info">学校新增</el-tag>
                                            <el-tag v-else-if="scope.row.isActivate == 1" type="success">学生激活</el-tag>
                                            <el-tag v-else type="danger">异常</el-tag>
                                        </div>
                                        <!--账号状态-->
                                        <div v-else-if="item.prop === 'status'"  class="wh-100 d-flex-around-center">
                                            <el-tag v-if="scope.row.status == 0" type="success">启用</el-tag>
                                            <el-tag v-else-if="scope.row.status == -1" type="danger">禁用</el-tag>
                                        </div>
                                        <div v-else class="wh-100 d-flex-around-center">
                                            <!-- 默认显示其他属性 -->
                                            {{ scope.row[item.prop] }}
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </div>
                    </div>
                    <div class="w-100 h-10 d-flex-around-center">
                        <Page
                            :total="pages.total"
                            :page-size="pages.pageSize"
                            :current="pages.pageNumber"
                            @on-change="changePage"
                            @on-page-size-change="changePageSize"
                            show-elevator
                            show-sizer
                            class-name="d-flex-center"
                            size="small"
                        />
                    </div>
                </div>
                <!--            右侧页面-->
                <div class=" h-100   d-flex " :class="{ 'w-30': isFold && !isAmplification, 'w-2': !isFold && !isAmplification, 'w-55': isFold && isAmplification }" style="background-color: white">
                    <!--                伸缩图标-->
                    <div class="w_15p h-100 d-flex-align-center" style="background-color: #f0f2f5">
                        <div v-if="!isFold" class="arrowBack cursor-pointer" @click="clickShowRight"></div>
                        <div v-if="isFold" class="arrowForward cursor-pointer" @click="clickShowRight"></div>
                    </div>
                    <!--                右侧页面内容-->
                    <div class="w_100-15p h-100 ">
                        <div v-show="isFold" class="wh-100">
                            <!--                    放大右侧内容图标-->
                            <div class="w-100 bor-base-b h-5 d-flex-between-center">
                                <div class="h-100 d-flex-align-center ml-12 fs-14 fw-6">
                                    {{ operationName }}
                                </div>
                                <div class="h-100 d-flex-align-center mr-8">
                                    <div v-if="!isAmplification" class="max" @click="clickAmplification"></div>
                                    <div v-if="isAmplification" class="min" @click="clickAmplification"></div>
                                </div>
                            </div>
                            <div class="w-100 h-95  ">
                                <div v-if="isInquire === '1'" class="wh-100  d-flex-between-center flex-column">
                                    <div class="w-100 h-20 px-12  d-flex-between-center flex-column">
                                        <div class="w-100 h-15 d-flex-align-center ml-12">
                                            <el-radio-group v-model="optionValue">
                                                <el-radio label="公用查询">公用查询</el-radio>
                                                <el-radio label="自用查询">自用查询</el-radio>
                                            </el-radio-group>
                                        </div>
                                        <div class="w-100 h-85 p-12 " style="background-color: #f8f8f8">
                                            <div class="wh-100  overflow-auto-hidden">
                                                <div v-for="item in 6" class="d-flex">
                                                    <div class="fs-14">本科生查询（不包括取消）</div>
                                                    <img src="./images/delete.png" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-100 h-515 pl-12  bor-base-b overflow-auto-hidden">
                                        <Form ref="searchForm"  :label-width="120" class="wh-100 pl-16">
                                                <FormItem label="姓名" prop="name" >
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.nameOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.name" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="身份证号" prop="idCard">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.idCardOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.idCard" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="届别" prop="jb">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.jbOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <DatePicker v-model="searchForm.jb" @on-change="returnData"  class="formItemTwo"  type="year" format="yyyy" clearable placeholder="选择毕业年度" ></DatePicker>
                                                    </div>
                                                </FormItem>
                                                <FormItem label="学号" prop="xh">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.xhOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.xh" class="formItemTwo"  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="sexCode">
                                                    <div  slot="label" @click="clickSexCode('sexCode')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">性别</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.sexCodeOption"   class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.sexCode" class="formItemTwo " placeholder="请选择" filterable   clearable>
                                                            <Option v-for="item in sexList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="mzCode">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('mzCode')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">民族</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.mzCodeOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.mzCode" multiple class="formItemTwo " placeholder="请选择" filterable   clearable>
                                                            <Option v-for="item in mzList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="zzmmCode">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('zzmmCode')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">政治面貌</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.zzmmCodeOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.zzmmCode" class="formItemTwo " placeholder="请选择" filterable   clearable>
                                                            <Option v-for="item in zzmmList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="xlCode">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('xlCode')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">学历</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.xlCodeOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.xlCode" class="formItemTwo " placeholder="请选择" filterable   clearable>
                                                            <Option v-for="item in xlList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="xxxs">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('xxxs')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">学习形式</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.xxxsOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.xxxs" class="formItemTwo " placeholder="请选择" filterable  clearable>
                                                            <Option v-for="item in xxxsList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="zyXsz">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('zyXsz')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">专业</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.zyXszOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.zyCode" class="formItemTwo " placeholder="请选择" filterable  clearable>
                                                            <Option v-for="item in zyList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem label="专业方向" prop="zyfx">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.zyfxOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.zyfx" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="pyfsCode">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('pyfsCode')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">培养方式</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.pyfsCodeOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.pyfsCode" class="formItemTwo " placeholder="请选择" filterable   clearable>
                                                            <Option v-for="item in pyfsList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem label="定向或委培单位" prop="dxhwpdw">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.dxhwpdwOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.dxhwpdw" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="sydCode">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('sydCode')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">生源所在地</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.sydCodeOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.sydCode" class="formItemTwo " placeholder="请选择" filterable   clearable>
                                                            <Option v-for="item in areaCodeList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="cxsy">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('cxsy')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">城乡生源</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.cxsyOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.cxsy" class="formItemTwo " placeholder="请选择" filterable  clearable>
                                                            <Option v-for="item in cxsyList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem>
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('xz')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">学制</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.xzOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.xz" class="formItemTwo " placeholder="请选择" filterable   clearable>
                                                            <Option v-for="item in xzList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem label="入学时间" prop="rxsj">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.rxsjOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.rxsj" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="毕业时间" prop="bysj">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.bysjOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.bysj" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="sfslbCode">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('sfslbCode')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">师范生类别</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.sfslbCodeOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.sfslbCode" class="formItemTwo " placeholder="请选择" filterable   clearable>
                                                            <Option v-for="item in sfslbList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="knslbCode">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('knslbCode')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">困难生类别</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.knslbCodeOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.knslbCode" class="formItemTwo " placeholder="请选择" filterable   clearable>
                                                            <Option v-for="item in knslbList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem label="所在院系" prop="szyx">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.szyxOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.szyx" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="所在班级" prop="szbj">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.szbjOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.szbj" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="手机号码" prop="mobile">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.mobileOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.mobile" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="电子邮箱" prop="email">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.emailOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.email" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="QQ号码" prop="qq">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.qqOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.qq" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="家庭地址" prop="jtdz">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.jtdzOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.jtdz" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="家庭电话" prop="jtdh">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.jtdhOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.jtdh" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="家庭邮编" prop="jtyb">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.jtybOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.jtyb" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="分校名称" prop="fxmc">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.fxmcOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.fxmc" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="毕业状况" prop="oneType">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.oneTypeOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.oneType" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="type">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('type')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">毕业去向</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.typeOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.type" class="formItemTwo " placeholder="请选择" filterable   clearable>
                                                            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem label="单位名称" prop="dwmc">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.dwmcOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.dwmc" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="组织机构" prop="tyshxycode">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.tyshxycodeOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.tyshxycode" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="单位性质" prop="dwxz">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.dwxzOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.dwxz" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="单位行业" prop="dwhy">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.dwhyOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.dwhy" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem prop="dwszd">
                                                    <div class="itemLabel" slot="label" @click="clickSexCode('sydCode')">
                                                        <span class="cursor-pointer" style="color: rgb(55, 140, 254)">单位所在地</span>
                                                    </div>
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.dwszdOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Select v-model="searchForm.dwszd" class="formItemTwo " placeholder="请选择" filterable   clearable>
                                                            <Option v-for="item in areaCodeList" :value="item.value" :key="item.value">{{ item.title }}</Option>
                                                        </Select>
                                                    </div>
                                                </FormItem>
                                                <FormItem label="工作职位类别" prop="gzzwlb">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.gzzwlbOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.gzzwlb" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="单位联系人" prop="dwlxr">
                                                    <div class="wh-100 d-flex ">
                                                        <Select  v-model="inquireForm.dwlxrOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.dwlxr" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="单位电话" prop="lxrdw">
                                                    <div class="wh-100 d-flex ">
                                                        <Select  v-model="inquireForm.lxrdwOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.lxrdw" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="联系人手机" prop="dwdh">
                                                    <div class="wh-100 d-flex ">
                                                        <Select  v-model="inquireForm.dwdhOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.dwdh" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="单位电子邮箱" prop="lxremail">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.lxremailOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.lxremail" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="联系人传真" prop="lxrfax">
                                                    <div class="wh-100 d-flex ">
                                                        <Select  v-model="inquireForm.lxrfaxOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.lxrfax" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="单位地址" prop="dwdz">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.dwdzOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.dwdz" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="单位邮编" prop="dwyb">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.dwybOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.dwyb" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="升学学校名称" prop="sxxxmc">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.sxxxmcOption" class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.sxxxmc" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="升学学校所在地" prop="sxxxszd">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.sxxxszdOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.sxxxszd" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                                <FormItem label="境外学校中文名称" prop="jwxxzwmc">
                                                    <div class="wh-100 d-flex ">
                                                        <Select v-model="inquireForm.jwxxzwmcOption"  class="formItemOne mr-12"  placeholder="请选择" filterable  clearable >
                                                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                        </Select>
                                                        <Input v-model="searchForm.jwxxzwmc" class="formItemTwo "  type="text" placeholder="请输入" clearable  />
                                                    </div>
                                                </FormItem>
                                        </Form>
                                    </div>
                                    <div class="w-100 h-27 pl-12 ">
                                        <div class="w-100 h-20 d-flex-align-center ">
                                            <div class="fs-14 ml-8">名称</div>
                                            <el-input size="mini" class="w-87 ml-8 d-f"></el-input>
                                        </div>
                                        <div class="w-100 h-515 mt-8 pr-8 d-flex-between-center flex-column ">
                                            <div class="h-15 w-100 d-flex-between-center">
                                                <div class="w-25 h-100 d-flex">
                                                    <div class="fs-12">条件组：</div>
                                                    <div>1组</div>
                                                </div>
                                                <div class="w-20 h-100 d-flex-between-center">
                                                    <div>新建组</div>
                                                    <div>删除组</div>
                                                </div>
                                            </div>
                                            <div class="h-80 w-100 " style="background-color: #f8f8f8;border-radius: 5px"></div>
                                        </div>
                                        <div class="w-100 h-20 mt-8 pr-8  d-flex-between-center ">
                                            <div class="w-auto h-100 d-flex">
                                                <Button style="background-color: white" size="default" type="default">存为自用</Button>
                                                <Button style="background-color: white" size="default" type="default">存为公用</Button>
                                            </div>
                                            <div class="w-auto h-100 d-flex">
                                                <Button style="background-color: white" size="default" type="default">重置</Button>
                                                <Button size="default" type="primary" @click="query">查询</Button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--                                统计区-->
                                <div v-if="isInquire === '2'" class="wh-100 px-12 d-flex-between-center flex-column">
                                    <div class="w-100 h-25  d-flex-between-center flex-column">
                                        <div class="w-100 h-15 d-flex-align-center ml-12">
                                            <el-radio-group v-model="optionValue">
                                                <el-radio label="公用统计表">公用统计表</el-radio>
                                                <el-radio label="自用统计表">自用统计表</el-radio>
                                            </el-radio-group>
                                        </div>
                                        <div class="w-100 h-50 pl-12" style="background-color: #f8f8fa">
                                            <div class="wh-100  overflow-auto-hidden">
                                                <div v-for="item in 6" class="d-flex">
                                                    <div class="fs-14">8个率（2020年使用）</div>
                                                    <img src="./images/delete.png" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="triangle">
                                            <div class="w-100 h-45 mt-4 d-flex pl-8">
                                                <div class="w-15 h-100 d-flex-align-center">名称</div>
                                                <Input class="w-80" size="small" placeholder="请输入" />
                                            </div>
                                            <div class="w-100 h-45 d-flex pl-8">
                                                <div class="w-15 h-100 d-flex-align-center">联接条件</div>
                                                <Select class="w-80" size="small"></Select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-100 h-65 ">
                                        <!--                                            名称列选择-->
                                        <div class="w-100 h-50 bor-base-b ">
                                            <div class="w-100 h-5 fs-14 fw-6 d-flex-align-center ">
                                                名称列选择
                                            </div>
                                            <div class="w-100 h-90  d-flex mt-8">
                                                <div class="w-20 h-100 fs-18 ">
                                                    <div id="scrollUpButtonOne" @click="upButtonOne" class="w-100 cursor-pointer h-7 scrollStyle d-flex-around-center ">
                                                        <div class="up"></div>
                                                    </div>
                                                    <div id="scrollAreaOne" class="w-100 h-86 overflow-auto-hidden" style="background-color: #e7f1ff">
                                                        <div v-for="item in 20" class="fs-8 fontStyle w-100 pl-8 cursor-pointer mt-8 fw-5">
                                                            学院代码
                                                        </div>
                                                    </div>
                                                    <div id="scrollDownButtonOne" @click="downButtonOne" class="w-100 cursor-pointer scrollStyle h-7  d-flex-around-center">
                                                        <div class="down"></div>
                                                    </div>
                                                </div>
                                                <div class="w-80-8px h-100 ml-8 ">
                                                    <div class="w-100 h-85 ">
                                                        <div class="wh-100 ">
                                                            <el-table size="small" :data="tableData" height="195" border class="w-375 custom-row-height" cell-class-name="h-10" row-class-name="w-100 ">
                                                                <el-table-column label="操作" width="80">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100  d-flex-around-center">
                                                                            <div class="tableOption cursor-pointer overflow-hidden">
                                                                                <img class="wh-100" src="./images/iconDelete.png" />
                                                                            </div>
                                                                            <div class="tableOption cursor-pointer overflow-hidden">
                                                                                <img class="wh-100" src="./images/iconDown.png" />
                                                                            </div>
                                                                            <div class="tableOption cursor-pointer overflow-hidden">
                                                                                <img class="wh-100" src="./images/iconUp.png" />
                                                                            </div>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="序号" width="50">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100  d-flex-around-center">
                                                                            1
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="行名称" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100">
                                                                            <Input size="small" />
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="标题" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100">
                                                                            <Input size="small" />
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="起始位数" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100">
                                                                            <Input size="small" />
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="长度" width="80">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100">
                                                                            <Input size="small" />
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="特别对应" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100 d-flex-around-center">
                                                                            <Checkbox>无</Checkbox>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="设置条件" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100 d-flex-around-center">
                                                                            <Checkbox>无</Checkbox>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="显示代码" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100 d-flex-around-center">
                                                                            <Checkbox></Checkbox>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                            </el-table>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex w-100 h-15 ">
                                                        <div class="w-40 h-100 ml-auto d-flex-between-center pt-8">
                                                            <div class="w-40 h-80  d-flex-around-center">
                                                                <div class="fs-14 d-flex-align-center">
                                                                    <img class="itemStyle" src="./images/itemAdd.png" />
                                                                    <div class="ml-2px">新增</div>
                                                                </div>
                                                            </div>
                                                            <div class="w-40 h-80  d-flex-around-center">
                                                                <div class="fs-14 d-flex-align-center">
                                                                    <img class="itemStyle" src="./images/itemDelete.png" />
                                                                    <div class="ml-2px">删除</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--                                            数值列选择-->
                                        <div class="w-100 h-50 mt-8 ">
                                            <div class="w-100 h-5 fs-14 fw-6 d-flex-align-center ">
                                                数值列选择
                                            </div>
                                            <div class="w-100 h-90  d-flex mt-8">
                                                <div class="w-20 h-100 fs-18 ">
                                                    <div id="scrollUpButtonTwo" @click="upButtonTwo" class="w-100 cursor-pointer h-7 scrollStyle d-flex-around-center ">
                                                        <div class="up"></div>
                                                    </div>
                                                    <div id="scrollAreaTwo" class="w-100 h-86 overflow-auto-hidden" style="background-color: #e7f1ff">
                                                        <div v-for="item in 20" class="fs-8 fontStyle w-100 pl-8 cursor-pointer mt-8 fw-5">
                                                            学院代码
                                                        </div>
                                                    </div>
                                                    <div id="scrollDownButtonTwo" @click="downButtonTwo" class="w-100 cursor-pointer scrollStyle h-7  d-flex-around-center">
                                                        <div class="down"></div>
                                                    </div>
                                                </div>
                                                <div class="w-80-8px h-100 ml-8 ">
                                                    <div class="w-100 h-85 ">
                                                        <div class="wh-100 ">
                                                            <el-table size="small" :data="tableData" height="195" border class="w-375 custom-row-height" cell-class-name="h-10" row-class-name="w-100 ">
                                                                <el-table-column label="操作" width="80">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100  d-flex-around-center">
                                                                            <div class="tableOption cursor-pointer overflow-hidden">
                                                                                <img class="wh-100" src="./images/iconDelete.png" />
                                                                            </div>
                                                                            <div class="tableOption cursor-pointer overflow-hidden">
                                                                                <img class="wh-100" src="./images/iconDown.png" />
                                                                            </div>
                                                                            <div class="tableOption cursor-pointer overflow-hidden">
                                                                                <img class="wh-100" src="./images/iconUp.png" />
                                                                            </div>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="序号" width="50">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100  d-flex-around-center">
                                                                            1
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="标题一" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100">
                                                                            <Input size="small" />
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="标题二" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100">
                                                                            <Input size="small" />
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="原始字段" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100">
                                                                            学历
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="标题三" width="80">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100">
                                                                            <Input size="small" />
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="数值一" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100 d-flex-around-center">
                                                                            <Select size="small"></Select>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="条件一" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100 d-flex-around-center">
                                                                            <Checkbox>无</Checkbox>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="数值二" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100 d-flex-around-center">
                                                                            <Select size="small"></Select>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="条件二" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100 d-flex-around-center">
                                                                            <Checkbox>无</Checkbox>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="运算符" width="100">
                                                                    <template slot-scope="scope">
                                                                        <div class="wh-100 d-flex-around-center">
                                                                            <Select size="small"></Select>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                            </el-table>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex w-100 h-15 ">
                                                        <div class="w-40 h-100 ml-auto d-flex-between-center pt-8">
                                                            <div class="w-40 h-80  d-flex-around-center">
                                                                <div class="fs-14 d-flex-align-center">
                                                                    <img class="itemStyle" src="./images/itemAdd.png" />
                                                                    <div class="ml-2px">新增</div>
                                                                </div>
                                                            </div>
                                                            <div class="w-40 h-80  d-flex-around-center">
                                                                <div class="fs-14 d-flex-align-center">
                                                                    <img class="itemStyle" src="./images/itemDelete.png" />
                                                                    <div class="ml-2px">删除</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-100 h-7  d-flex-between-center   ">
                                        <div class="w-auto h-100 d-flex-align-center">
                                            <Button style="background-color: white" size="default" type="default">存为自用</Button>
                                            <Button style="background-color: white" size="default" type="default">存为公用</Button>
                                        </div>
                                        <div class="w-auto h-100 d-flex-align-center">
                                            <Button style="background-color: white" size="default" type="default">重置</Button>
                                            <Button size="default" type="primary">查询</Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import user from '@/views/main-components/user.vue';
import { getStore, removeStore } from '@/libs/storage';
import { getDictDataByType } from '@/api';
import { getByXlAndLevel } from '@/api/bys/code';
import { getQueryDataAPI } from '@/api/dataStatistics/dataViewApis';
import moment from 'moment';
import { columnOptions, inquireForm, options, searchForm, tableColumn } from '@/views/dataStatistics/dataView/dataView';

export default {
    components: { user },
    mounted() {
        this.getDictData();
         this.getAllList();
        if (new Date().getMonth() + 1 > 9) {
            this.dateValue = new Date().getFullYear() + 1;
        } else {
            this.dateValue = new Date().getFullYear();
        }
        this.query()
    },
    data() {
        return {
            isFold: true,
            isAmplification: false,
            isInquire: '1', //1查询、2统计
            operationName: '查询区',
            optionValue: '',
            dataEdit: [],
            dataTree: [],
            treeProp:{
                children: 'children',
                label: 'title'
            },
            expandLevel: 1,
            hv:{value:0},
            dateValue: '',
            searchKey: '',
            selectValue:["姓名","身份证号","届别","院校名称",],
            columnOptions: columnOptions,
            options: options,
            tableData: [],
            tableColumn:tableColumn,
            inquireForm:  inquireForm,
            searchForm: searchForm,
            pages: {
                pageSize: 10,
                pageNumber: 1,
                total: 0
            },
            tableLoading:false,
            sexList: [],
            mzList: [],
            zzmmList: [],
            xlList: [],
            xxxsList: [],
            zyList: [],
            pyfsList: [],
            areaCodeList: [],
            cxsyList: [],
            xzList: [],
            sfslbList: [],
            knslbList: [],
            typeList: [],
            oneTypeDicts:[],
            title:''
        };
    },
    methods: {
        selectOp(val){
            if(!val){
                console.log("213132132")
                this.tableLoading=true
                // 在1000毫秒（1秒）后执行showMessage函数
                setTimeout(() => {
                    for (const valElement of tableColumn) {
                        valElement.isShow = this.selectValue.includes(valElement.label);
                    }
                }, 1000); // 3000毫秒后执行
                // 在1000毫秒（1秒）后执行showMessage函数
                setTimeout(() => {
                    this.tableLoading = false;
                }, 2000); // 3000毫秒后执行
            }
        },
        handleNodeClick(val){
            this.title=val.tableTitle
            if(/全省数据/.test(val.title)){
                console.log("1",val)
                this.inquireForm.gxcodeOption=''
                this.searchForm.gxcode=''
                this.inquireForm.szyxOption=''
                this.searchForm.szyx=''
                this.query()
            }else{
                if(/^\d+$/.test(val.code)){
                    // 选择高校
                    console.log("2")
                    this.inquireForm.gxcodeOption='7'
                    this.searchForm.gxcode=val.code
                    this.query()
                }else{
                    console.log("3")
                    this.inquireForm.gxcodeOption='7'
                    this.searchForm.gxcode=this.schoolRecursion(val.code)
                    this.inquireForm.szyxOption='7'
                    this.searchForm.szyx=val.code
                    this.query()
                }
            }


        },
        schoolRecursion(name){
            let dataList=this.dataTree[0].children
            for(let i=0;i<dataList.length;i++){
                if(dataList[i].children){
                    for(let j=0;j<dataList[i].children.length;j++){
                        if(dataList[i].children[j].code === name){
                            return dataList[i].code
                        }
                    }
                }
            }

        },
        returnData(data){
             this.searchForm.jb=moment(data).format("YYYY")
        },
        getDictData(){
            //性别
            getDictDataByType('sex').then(res => {
                if (res.success) {
                    this.sexList = res.result;
                    console.log("this.sexList",this.sexList)

                }
            });
            //   民族
            getDictDataByType('ethnic').then(res => {
                if (res.success) {
                    this.mzList = res.result;
                }
            });
            //   政治面貌
            getDictDataByType('political').then(res => {
                if (res.success) {
                    this.zzmmList = res.result;
                }
            });
            //   学历
            getDictDataByType('degree').then(res => {
                if (res.success) {
                    this.xlList = res.result;
                }
            });
            //   学习形式
            getDictDataByType('learning-forms').then(res => {
                if (res.success) {
                    this.xxxsList = res.result;
                }
            });
            // 专业
            getByXlAndLevel({ gradLevelDict: this.searchForm.xlcc, level: '2' }).then(res => {
                if (res.success) {
                    this.zyList = res.result.map(e => {
                        return {
                            xllxz: e.gradLevelDict,
                            value: e.profCode + e.title,
                            title: e.profCode + e.title,
                            zy: e.title,
                            zyCode: e.profCode
                        };
                    });
                    console.log("this.zyList",this.zyList)
                }
            });
            //培养方式 training-methods
            getDictDataByType('training-methods').then(res => {
                if (res.success) {
                    this.pyfsList = res.result;
                }
            });
            // 去向代码
            this.postRequest('/areaCode/getAll').then(res => {
                if (res.success) {
                    this.areaCodeList = res.result.map(e => {
                        return { value: e.code, title: e.displayName };
                    });
                }
            });
            //城乡生源
            getDictDataByType('cxsy').then(res => {
                if (res.success) {
                    this.cxsyList = res.result;
                }
            });
            //   educational-system 学制
            getDictDataByType('educational-system').then(res => {
                if (res.success) {
                    this.xzList = res.result;
                }
            });
            //   educational-system 师范生类别
            getDictDataByType('sfs_type').then(res => {
                if (res.success) {
                    this.sfslbList = res.result;
                }
            });
            //   困难生类别代码
            getDictDataByType('difficult-student-category').then(res => {
                if (res.success) {
                    this.knslbList = res.result;
                }
            });
            //就业状况
            getDictDataByType('qx').then(res => {
                if (res.success) {
                    this.oneTypeDicts = res.result;
                    console.log(this.oneTypeDicts,'毕业状况')
                }
            });
            // 生源所在地
            this.postRequest('/whereManage/getAll').then(res => {
                if (res.success) {
                    this.typeList = res.result.map(e => {
                        return { value: e.value + '', title: e.whereManageName };
                    });
                }
            });
        },
        query(){
            this.tableLoading=true
            getQueryDataAPI({...this.pages,...this.inquireForm,...this.searchForm}).then((res) =>{
                this.tableData=res.result.records
                this.pages.total=res.result.total
                this.tableLoading=false
            })
        },
        upButtonOne() {
            const scrollButton = document.getElementById('scrollUpButtonOne');
            const scrollArea = document.getElementById('scrollAreaOne');

            scrollButton.addEventListener('click', function() {
                scrollArea.scrollTop -= 10; // 控制向上滚动的距离
                // scrollArea.scrollTop += 50; // 控制向下滚动的距离
            });
        },
        downButtonOne() {
            const scrollButton = document.getElementById('scrollDownButtonOne');
            const scrollArea = document.getElementById('scrollAreaOne');

            scrollButton.addEventListener('click', function() {
                // scrollArea.scrollTop -= 10; // 控制向上滚动的距离
                scrollArea.scrollTop += 10; // 控制向下滚动的距离
            });
        },
        upButtonTwo() {
            const scrollButton = document.getElementById('scrollUpButtonTwo');
            const scrollArea = document.getElementById('scrollAreaTwo');

            scrollButton.addEventListener('click', function() {
                scrollArea.scrollTop -= 10; // 控制向上滚动的距离
                // scrollArea.scrollTop += 50; // 控制向下滚动的距离
            });
        },
        downButtonTwo() {
            const scrollButton = document.getElementById('scrollDownButtonTwo');
            const scrollArea = document.getElementById('scrollAreaTwo');

            scrollButton.addEventListener('click', function() {
                // scrollArea.scrollTop -= 10; // 控制向上滚动的距离
                scrollArea.scrollTop += 10; // 控制向下滚动的距离
            });
        },
        // 点击查询
        clickInquire() {
            this.isInquire = '1';
            this.operationName = '查询区';
        },
        // 点击统计
        clickStatistics() {
            this.isInquire = '2';
            this.operationName = '统计区';
        },
        // 点击导出
        clickDerive() {
            this.isInquire = '3';
        },
        // 显示隐藏右侧区域
        clickShowRight() {
            this.isFold = !this.isFold;
            if (this.isAmplification) {
                this.isAmplification = false;
                this.isFold = true;
            }
        },
        //  是否放大右侧区域
        clickAmplification() {
            if (!this.isFold) {
                this.isFold = true;
            }
            this.isAmplification = !this.isAmplification;
        },
        search() {
            // this.loading = true;
            this.getRequest('/schoolCode/getAllListView', { title: this.searchKey }).then(res => {
                // this.loading = false;
                if (res.success) {
                    let value = res.result;
                    // 仅展开指定级数 默认后端已展开所有
                    let expandLevel = this.expandLevel;
                    value.forEach(function(e) {
                        if (expandLevel == 1) {
                            if (e.level == 0) {
                                e.expand = false;
                            }
                            if (e.children && e.children.length > 0) {
                                e.children.forEach(function(c) {
                                    if (c.level == 1) {
                                        c.expand = false;
                                    }
                                    if (c.children && c.children.length > 0) {
                                        c.children.forEach(function(b) {
                                            if (b.level == 2) {
                                                b.expand = false;
                                            }
                                        });
                                    }
                                });
                            }
                        } else if (expandLevel == 2) {
                            if (e.level == 0) {
                                e.expand = true;
                            }
                            if (e.children && e.children.length > 0) {
                                e.children.forEach(function(c) {
                                    if (c.level == 1) {
                                        c.expand = false;
                                    }
                                    if (c.children && c.children.length > 0) {
                                        c.children.forEach(function(b) {
                                            if (b.level == 2) {
                                                b.expand = false;
                                            }
                                        });
                                    }
                                });
                            }
                        } else if (expandLevel == 3) {
                            if (e.level == 0) {
                                e.expand = true;
                            }
                            if (e.children && e.children.length > 0) {
                                e.children.forEach(function(c) {
                                    if (c.level == 1) {
                                        c.expand = true;
                                    }
                                    if (c.children && c.children.length > 0) {
                                        c.children.forEach(function(b) {
                                            if (b.level == 2) {
                                                b.expand = false;
                                            }
                                        });
                                    }
                                });
                            }
                        }
                    });
                    let item=value.find((item) => item.title==="全省数据")
                    let value1=value.filter((item) => item.title!=="全省数据")
                    this.dataTree = [
                        {
                            id: '0',
                            level: -1,
                            title: '全省数据'+'('+item.code+')',
                            expand: true,
                            tableTitle: '全省数据'+'('+item.code+')',
                            children: value1
                        }
                    ];
                }
            });
        },
        //获取树状结构数据
        getAllList() {
            // this.loading = true;
            this.getRequest('/schoolCode/getAllListView').then(res => {
                // this.loading = false;
                if (res.success) {
                    let value = res.result;
                    // 仅展开指定级数 默认后端已展开所有
                    let expandLevel = this.expandLevel;
                    value.forEach(function(e) {
                        if (expandLevel == 1) {
                            if (e.level == 0) {
                                e.expand = false;
                            }
                            if (e.children && e.children.length > 0) {
                                e.children.forEach(function(c) {
                                    if (c.level == 1) {
                                        c.expand = false;
                                    }
                                    if (c.children && c.children.length > 0) {
                                        c.children.forEach(function(b) {
                                            if (b.level == 2) {
                                                b.expand = false;
                                            }
                                        });
                                    }
                                });
                            }
                        } else if (expandLevel == 2) {
                            if (e.level == 0) {
                                e.expand = true;
                            }
                            if (e.children && e.children.length > 0) {
                                e.children.forEach(function(c) {
                                    if (c.level == 1) {
                                        c.expand = false;
                                    }
                                    if (c.children && c.children.length > 0) {
                                        c.children.forEach(function(b) {
                                            if (b.level == 2) {
                                                b.expand = false;
                                            }
                                        });
                                    }
                                });
                            }
                        } else if (expandLevel == 3) {
                            if (e.level == 0) {
                                e.expand = true;
                            }
                            if (e.children && e.children.length > 0) {
                                e.children.forEach(function(c) {
                                    if (c.level == 1) {
                                        c.expand = true;
                                    }
                                    if (c.children && c.children.length > 0) {
                                        c.children.forEach(function(b) {
                                            if (b.level == 2) {
                                                b.expand = false;
                                            }
                                        });
                                    }
                                });
                            }
                        }
                    });
                    let item=value.find((item) => item.title==="全省数据")
                    let value1=value.filter((item) => item.title!=="全省数据")
                    this.dataTree = [
                        {
                            id: '0',
                            level: -1,
                            title: '全省数据'+'('+item.code+')',
                            expand: true,
                            tableTitle: '全省数据'+'('+item.code+')',
                            children: value1
                        }
                    ];
                    this.title='全省数据'+'('+item.code+')'
                }
            });
        },
        changePage: function(val) {
            this.pages.pageNumber = val;
            this.query()
        },
        changePageSize: function(val) {
            this.pages.pageSize = val;
            this.query()
        }
    }
};
</script>
